<script lang="ts" setup>
import { recursion } from '@vc/utils';
import {
  type EsgEvent,
  getEsgEventCodes, getEsgEventF9, getEsgEventRiskLevel
} from '../../../apis';
import { INIT_PARAMS, PAGE_SIZE } from '../../../constants';
import { useF9Context } from '../../../use/use-context';
import { useTable } from '../use/useControversialEventsTable';
import PageHeader from '../../../components/page-header.vue';

interface Props {
  /** 标题名称 */
  title: string;
  /** 标题 id */
  menuId: string;
  /** 数值 */
  count: number;
}

const { title, menuId, count } = defineProps<Props>();

let pageNum = $ref(1);
const { companyId } = useF9Context();
const requestParams = reactive<EsgEvent>({
  companyId,
  ...INIT_PARAMS,
  eventEndDate: '',
  eventStartDate: '',
  eventTypeCode: '',
  riskLevel: ''
});

const { data: eventCode } = useRequest(getEsgEventCodes, {
  defaultParams: [companyId],
  onSuccess: (res) => {
    recursion(res, (item => {
      item.name = item.name + '(' + (item.count) + ')';
    }), 'values');
  }
});


const { data } = useRequest(getEsgEventRiskLevel);

const {
  data: tableData,
  run,
  loading,
  error
} = useRequest(getEsgEventF9, {
  defaultParams: [{ ...requestParams, pageNum }]
});

const { columns } = useTable();

/** 翻页点击 */
const handleCurrentChange = (data) => {
  pageNum = data;
  run({ ...requestParams, pageNum });
};

const sortChange = (data) => {
  requestParams.sortRule = data.order ? data.field + ':' + data.order : '';
};


watch(
  () => requestParams,
  (val) => {
    pageNum = 1;
    run({ ...val, pageNum });
  },
  {
    deep: true
  }
);

const onSubmit = (data) => {
  requestParams.riskLevel = data;
};

const onCascaderSubmit = (data) => {
  const { lv2 } = data;
  requestParams.eventTypeCode = lv2?.join(',') || '';
};

const handleDateClick = (date) => {
  requestParams.eventStartDate = date[0];
  requestParams.eventEndDate = date[1];
};
</script>

<template>
  <page-header class="mt-18px mb-15px" :count="count" :title="title" :menuId="menuId" is-small />
  <div class="flex justify-start mb-14px">
    <vc-multiple-select v-if="data?.length" class="mr-20px self-center font-style" title="风险等级" :options="data" hasAll hideSearch
      @submit="onSubmit" />
    <vc-datepicker class="mr-20px self-center font-style" title="发生时间" type="daterange" :shortcuts="[90, 180, 365, 365 * 3]"
      @submit="handleDateClick" />
    <vc-cascader-select v-if="eventCode" class="self-center font-style" title="事件类型" :options="eventCode" labelKey="name"
      valueKey="code"
      childrenKey="values"
      @submit="onCascaderSubmit" />
  </div>
  <vc-empty-fail @click="run({...requestParams, pageNum})" v-if="error" />
  <div class="container" v-else>
    <vc-table
      :loading="loading"
      :tableData="tableData?.values"
      :columns="columns"
      :total="tableData?.total"
      :pageSize="PAGE_SIZE"
      v-model:pageNum="pageNum"
      @page-change="handleCurrentChange"
      @sort-change="sortChange"
    />
  </div>
</template>

<style lang="scss" scoped>
  :deep(.vc-multiple-select) {
    .vc-multiple-select__title {
      font-size: 13px !important;
      color: #666666 !important;
    }
  }
  :deep(.vc-datepicker) {
    .vc-datepicker__title {
      font-size: 13px !important;
      color: #666666 !important;
    }
  }
  :deep(.vc-cascader-select) {
    .vc-cascader-select__title {
      font-size: 13px !important;
      color: #666666 !important;
    }
  }
</style>